<template>
  <div class="layout_box">
    <leftNav></leftNav>
    <div class="layout_right">
      <Top></Top>
      <!-- <NavOptionsBar></NavOptionsBar> -->
      <div class="content">
        <ElScrollbar class="main">
          <div class="content_box">
            <RouterView v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </RouterView>
          </div>
          <footer></footer>
        </ElScrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import leftNav from "./components/left_nav.vue";
import Top from "./components/top.vue";
import Footer from "./components/footer.vue";
import NavOptionsBar from "./components/nav_options_bar.vue";
import { useRoute } from "vue-router";
import { watch, ref } from "vue";
const router = useRoute();
const contentAnimation = ref("");
</script>
<style lang="scss" scoped>
.layout_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
}

.layout_right {
  text-indent: 10px;
  flex: 1;
  background-color: #eee;
}

.content {
  //   background: #eee;
  padding-top: 8px;
  width: 100%;
  //   height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.content_box {
  width: 99%;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  height: 99%;
}

.content_box > div {
  height: 100%;
}
.fade-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}

.fade-enter-to {
  transform: translateX(0%);
  opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
  transition: all 0.2s ease-out;
}

.fade-leave-from {
  transform: translateX(0%);
  opacity: 1;
}

.fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
